<template>
	<view class="main">
		<view class="current_phone">
			<text>当前手机号{{phoneNumberStr}}</text>
		</view>
		<u-field class="input-phone" v-model="newPhoneNumber" label-width="0" maxlength="11" placeholder="请输入新手机号">
			<view class="ic-phone" slot="icon">
				<image class="ic-phone" src="/static/logo.png"></image>
			</view>
		</u-field>

		<view class='view-captcha'>
			<u-field class="input-captcha" v-model="captcha" maxlength="6" label-width="0" placeholder="请输入验证码">
				<view class="ic-phone" slot="icon">
					<image class="ic-phone" src="/static/logo.png"></image>
				</view>
			</u-field>

			<u-verification-code class='btn-captcha' seconds="60" @end="captchaEnd" @start="captchaStart" ref="uCode"
				@change="captchaCodeChange">
			</u-verification-code> 
			<u-button :disabled="!btnCaptchaEnable" :class="['btn-captcha', !btnCaptchaEnable && 'btn-hui']" @click="captchaGetCode()" :ripple="true" hair-line=false>{{tips}}</u-button>

		</view>

		<u-button  class='btn-submit' @click="clkSubmit()" :ripple="true" hair-line=false>确认修改</u-button>

	</view>



</template>

<script>
	import apis from '@/apis.js'
	export default {
		data() {
			return {
				phoneNumber: '',
				newPhoneNumber: '',
				captcha: '',
				tips: '',
				btnCaptchaEnable: true,
			}
		},
		computed: {
			/**
			 *  @function 当前手机号加密
			 */
			phoneNumberStr() {
				return this.phoneNumber.replace(/^(\d{3})\d{4}(\d+)/, "$1****$2")
			}
		},
		onLoad() {
			this.getUserDetail()
		},
		methods: {
			/**
			 *  @function 获取当前手机号
			 */
			getUserDetail() {
				this.$http.get(apis.userDetail).then(res => {
					if (res.data.code === 200) {
						this.phoneNumber =res.data.result.phone
					}
				})
			},
			/**
			 *  @function 确认修改
			 */
			clkSubmit() {
				if(!this.newPhoneNumber) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none',
					})
					return
				}
				let myreg=/^[1][3,4,5,7,8,9][0-9]{9}$/;
				if (!myreg.test(this.newPhoneNumber)) {
				    uni.showToast({
				    	title: '请输入正确的手机号',
				    	icon: 'none',
				    })
				    return
				} 
				if(!this.captcha) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none',
					})
					return
				}
				let param = {
					phone: this.newPhoneNumber,
					validateCode: this.captcha
				}
				this.$http.post(apis.modifyPhoneEdit, param).then(res => {
					if (res.data.code === 200) {
						uni.showToast({
							title: '修改成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/tabbar/tabbar-5/tabbar-5'
							})
						}, 1000)
					}
				})
			},
			/**
			 * @function 获取验证码
			 */
			captchaGetCode() {
				if(!this.newPhoneNumber) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none',
					})
					return
				}
				let myreg=/^[1][3,4,5,7,8,9][0-9]{9}$/;
				if (!myreg.test(this.newPhoneNumber)) {
				    uni.showToast({
				    	title: '请输入正确的手机号',
				    	icon: 'none',
				    })
				    return
				}   
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码',
						icon: 'none'
					})
					this.$http.get(apis.modifyPhoneValidate, { phone : this.newPhoneNumber}).then(res => {
						if (res.data.code === 200) {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							this.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						}
					})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			captchaCodeChange: function(text) {
				this.tips = text;
			},
			captchaEnd() {
				this.btnCaptchaEnable = true
			},
			captchaStart() {
				this.btnCaptchaEnable = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 29rpx;

		.current_phone {
			font-size: 31rpx;
			margin-top: 50rpx;
			font-family: SimHei;
			font-weight: 400;
			line-height: 40rpx;
			color: #4D5B80;
			opacity: 1;

		}

		.input-phone {
			margin-top: 62rpx;
			background: #E9EBF4;
			padding: 10rpx 20rpx 10rpx 20rpx;
			opacity: 1;
			border-radius: 8px;
		}

		.view-captcha {
			display: flex;
			margin-top: 35rpx;
			flex-flow: row nowrap;

			.input-captcha {
				width: 423rpx;
				background: #E9EBF4;
				padding: 10rpx 20rpx 10rpx 20rpx;
				opacity: 1;
				border-radius: 8px;
			}

			.btn-captcha {
				width: 200rpx;
				flex-grow: 1;
				margin-left: 23rpx;
				background: #3FA7FF;
				opacity: 1;
				border-radius: 8rpx;

				font-size: 31rpx;
				font-family: SimHei;
				font-weight: 400;
				line-height: 40rpx;
				color: #FFFFFF;
				opacity: 1;
			}
			.btn-hui {
				background: #666;
			}
		}

	}

	.ic-phone {
		width: 38rpx;
		height: 59rpx;
	}

	.btn-submit {
		width: 308rpx;
		margin-top: 192rpx;
		height: 62rpx;
		background: #3FA7FF;
		box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16);
		opacity: 1;
		border-radius: 4rpx;

		font-size: 31rpx;
		font-family: SimHei;
		font-weight: 400;
		line-height: 40rpx;
		color: #FFFFFF;
		opacity: 1;
	}
</style>
